<template>
  <div>
      <el-container>
          <el-main>
              <div class="LeaveCare-info-title">
                  <p>
                      老人出院管理<el-button class="Leaveadd"  size="large" type="primary" @click="LeaveDialogVisible=true">+添加</el-button>
                  </p>
              </div>
              <div class="LeaveCare-info-body">
                  <div class="LeaveList">
                      <el-table fixed :data="ElderlyForm" stripe style="width: 100%" max-height="500">
                          <el-table-column type="index" :index="typeIndex" label="序号" align="center"></el-table-column>
                          <el-table-column prop="eldername" label="姓名" align="center"></el-table-column>
                          <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                          <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                          <el-table-column prop="phone" label="电话号码" align="center"></el-table-column>
                          <el-table-column prop="room" label="入住房间" align="center"></el-table-column>
                          <el-table-column prop="intime" label="入住日期" align="center"></el-table-column>
                          <el-table-column prop="outtime" label="出院时间" align="center"></el-table-column>
                          <el-table-column prop="retotal" label="退费合计（元）" align="center"></el-table-column>
                          <el-table-column prop="restate" label="退款状态" align="center"></el-table-column>
                          <el-table-column prop="appstate" label="审批状态" align="center"></el-table-column>
                          <el-table-column align="center" label="操作" fixed="right" width="200">
                              <template slot-scope="scope">
                               <el-button size="mini" type="primary" @click.native.prevent="updateRow(scope.$index, scope.row)"
                                         style="background-color: #409EFF;border-color: #409EFF;color:#fff;">编辑</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                  </div>
              </div>
              <div>
                  <el-dialog v-model="LeaveDialogVisible" :visible.sync="LeaveDialogVisible" title="添加老人" @close="closepage()" width="650px"
                             :before-close="handleClose">
                      <el-form autoComplete="on" :model="addElderly" :rules="userRules" ref="addElderlyForm" label-width="120px"
                               label-position="right" class="card-box shop-form">
                          <el-form-item class="inp" prop="trueName" label="姓名：" style="width: 80%;">
                              <el-input name='eldername' v-model="addElderly.eldername" autoComplete="on" clearable />
                          </el-form-item>
                          <el-form-item class="inp" prop="age" label="年龄：" style="width: 80%;">
                              <el-input name='age' v-model="addElderly.age" autoComplete="on" clearable />
                          </el-form-item>
                          <el-form-item class="inp" prop="sex" label="性别：" style="width: 80%;">
                              <el-input name='sex' v-model="addElderly.sex" autoComplete="on" clearable />
                          </el-form-item>
                          <el-form-item class="inp" prop="phone" label="电话号码：" style="width: 80%;">
                              <el-input name='phone' v-model="addElderly.phone" autoComplete="on" clearable />
                          </el-form-item>
                          <el-form-item class="inp" prop="room" label="入住房间:" style="width: 80%;">
                              <el-input name='room' v-model="addElderly.room" autoComplete="on" clearable />
                          </el-form-item>
                          <el-form-item class="inp" prop="heart_status" label="心里状态：" style="width: 80%;">
                              <el-input name='heart' v-model="addElderly.heart" autoComplete="on" clearable />
                          </el-form-item>
                          <div class="LeaveList-btn">
                            <el-button class="formBtn" :loading="loading" @click="submitAdd()">
                              提交
                            </el-button>
                              <el-button class="formBtn" :loading="loading" @click="handleCancel()">
                                  取消
                              </el-button>
                          </div>
                      </el-form>
                  </el-dialog>
              </div>
            <div>
              <el-dialog v-model="updateLeaveDialogVisible" :visible.sync="updateLeaveDialogVisible" title="修改" @close="closepage()" width="650px"
                         :before-close="handleClose">
                <el-form autoComplete="on" :model="updateElderly" :rules="userRules" ref="updateElderly" label-width="120px"
                         label-position="right" class="card-box shop-form">
                  <el-form-item class="inp" prop="trueName" label="姓名：" style="width: 80%;">
                    <el-input name='eldername' v-model="updateElderly.eldername" autoComplete="on" clearable />
                  </el-form-item>
                  <el-form-item class="inp" prop="age" label="年龄：" style="width: 80%;">
                    <el-input name='age' v-model="updateElderly.age" autoComplete="on" clearable />
                  </el-form-item>
                  <el-form-item class="inp" prop="sex" label="性别：" style="width: 80%;">
                    <el-input name='sex' v-model="updateElderly.sex" autoComplete="on" clearable />
                  </el-form-item>
                  <el-form-item class="inp" prop="phone" label="电话号码：" style="width: 80%;">
                    <el-input name='phone' v-model="updateElderly.phone" autoComplete="on" clearable />
                  </el-form-item>
                  <el-form-item class="inp" prop="room" label="入住房间:" style="width: 80%;">
                    <el-input name='room' v-model="updateElderly.room" autoComplete="on" clearable />
                  </el-form-item>
                  <el-form-item class="inp" prop="heart_status" label="心里状态：" style="width: 80%;">
                    <el-input name='heart' v-model="updateElderly.heart" autoComplete="on" clearable />
                  </el-form-item>
                  <div class="LeaveList-btn">
                    <el-button class="formBtn" :loading="loading" @click="submitUpdate()">
                      提交
                    </el-button>
                    <el-button class="formBtn" :loading="loading" @click="handleUpdateCancel()">
                      取消
                    </el-button>
                  </div>
                </el-form>
              </el-dialog>
            </div>
          </el-main>
      </el-container>
  </div>
</template>

<script>
  //import request from "../../request";
  import axios from "axios";

  export default {
      data(){
          return{
            updateElderly: {
              eldername:'',
              sex: '',
              age: '',
              phone:'',
              heart:'',
              room:'',
            },
            updateLeaveDialogVisible: false,
              LeaveDialogVisible: false,
              listLoading: false,
              exportFile: {
                  text: ''
              },
              exportForm: {
                  file: ''
              },
              ElderlyForm: [{
                  eldername:'王志华',
                  sex:'男',
                  age:'60',
                  room:'216',
                  heart_status:'健康',
                  phone:'123',
              }],
              addElderly:{
                  eldername:'',
                  sex: '',
                  age: '',
                  phone:'',
                  heart:'',
                  room:'',
              },
              loading: false,
              list: [],
              messageForm: {
                  userName: '',
                  userId: '',
                  messageType: '0',
                  messageContent: ''
              },
              userRules: {
                  eldername: [{
                      required: true,
                      message: '姓名不能为空',
                      trigger: 'blur'
                  }],
                  phone: [{
                      required: true,
                      message: '电话不能为空',
                      trigger: 'blur'
                  }],
                  age: [{
                      required: true,
                      message: '年龄不能为空',
                      trigger: 'blur'
                  }],
                  sex: [{
                      required: true,
                      message: '性别不能为空',
                      trigger: 'blur'
                  }]
              },

              paginationData: 'total, sizes, prev, pager, next, jumper',
              total: null,


              //分页大小
              listQuery: {
                  current: 1,
                  size: 10,
                  condition: {}
              },
          }
      },

      methods: {
          deleteRow(index, rows) {

            console.log(rows)
    },
        updateRow(index, rows) {
            this.updateElderly = rows,
                this.updateLeaveDialogVisible = true,
          console.log(this.updateElderly)
        },
        submitAdd(){
              this.LeaveDialogVisible = false;
              this.$message.success('添加成功')
              axios.post("http://localhost:8888/api/elderly",this.addElderly).then(res=>{
              console.log(this.addElderly),
              console.log(res)
            // if (res){
            //
            // } else {
            //
            // }
              })
        },
        submitUpdate(){
          this.updateLeaveDialogVisible = false;
          this.$message.success('修改成功')
          axios.put("http://localhost:8888/api/elderly",this.updateElderly).then(res=>{
            console.log(this.updateElderly),
            console.log(res)
            // if (res){
            //
            // } else {
            //
            // }
          })
        },

          handleClose(done) {
              this.$confirm('确认关闭？')
                  .then(_ => {
                      done();
                  })
                  .catch(_ => {});
          },

          typeIndex(index) {
              return index + (this.listQuery.current - 1) * this.listQuery.size + 1
          },
          //取消添加
          handleCancel() {
              this.$nextTick(() => {
                  this.$refs['addElderlyForm'].resetFields()
              })
              this.LeaveDialogVisible = false
          },
        handleUpdateCancel() {
          this.$nextTick(() => {
            this.$refs['addElderlyForm'].resetFields()
          })
          this.updateLeaveDialogVisible = false
        },

          // 回调
          closepage() {
              this.$nextTick(() => {
                  this.$refs['addElderlyForm'].resetFields()
              })
          },

          //分页
          handleSizeChange(val) {
              this.listQuery.size = val
              this.getData()
          },
          handleCurrentChange(val) {
              this.listQuery.current = val
              this.getData()
          },

          //修改
          modifyUser(index, row) {
              this.ElderlyForm = row
              this.addFlag = false
              this.LeaveDialogVisible = true
          },
      },
      created() {
          // this.getData()
      }
  }
</script>

<style  scoped>
  .LeaveCare-info-title {
      width: auto;
      height: 56px;
      background-color: #EDEFF2;
      font-size: 22px;
      /* font-family: SimHei; */
      font-weight: 400;
      color: #333333;
      line-height: 48px;
      border-left: 6px solid #409EFF;
      text-align: left;
  }

  .Leaveadd {
          margin-left: 30px
      }

  .LeaveCare-info-title p {
      padding-left: 25px;
      padding-top: 5px;
  }

  .addUserBtn {
      width: 140px;
      height: 44px;
      color: #ffffff;
      background-color: #409EFF;
      float: right;
      margin-right: 70px;
  }

  .LeaveList-btn {
      text-align: center;
  }

  .LeaveList-btn .formBtn {
      width: 120px;
      height: 44px;
      background-color: #409EFF;
      border-color: #409EFF;
      color: #ffffff;
  }

  .LeaveList-pagination {
      margin-top: 50px;
      text-align: center;
      padding-bottom: 50px;
  }

  .el-pagination.is-background .el-pager li.active {
      background-color: #409EFF;
  }

</style>
